<template>
  <el-row :gutter="20" style="padding: 20px" v-loading="loading">
    <el-col :span="12">
      <el-form :model="info" :rules="rules" ref="info" label-width="100px">
        <el-form-item label="企业全称" prop="enterpriseName">
          <el-input v-model="info.enterpriseName"></el-input>
        </el-form-item>
        <!-- <el-form-item label="统一社会信用代码" prop="insureCertificateNumber">
          <el-input v-model="info.insureCertificateNumber"></el-input>
        </el-form-item> -->
        <el-form-item label="营业执照" prop="delivery">
          <el-upload :headers="headers" :auto-upload="true" action="/file/upload" :http-request="uploadFile" :before-upload="beforeUpload" :on-success="onSuccess" :show-file-list="false">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="联系人" prop="contactName">
          <el-input v-model="info.contactName"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="contactPhone">
          <el-input v-model="info.contactPhone"></el-input>
        </el-form-item>
        <el-form-item label="省市区" prop="addressData">
          <el-cascader filterable :options="options" v-model="info.addressData"></el-cascader>
        </el-form-item>
        <el-form-item label="联系地址" prop="contactAddress">
          <el-input v-model="info.contactAddress"></el-input>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select :disabled="true" v-model="info.checkStatus" placeholder="请选择活动区域">
            <el-option v-for="item in checkStatusName" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('info')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="12" v-if="!!info.businessLicense">
      <div class="block">
        <el-image style="width: 100%; height: 400px" :src="info.businessLicense" fit="contain"></el-image>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import { regionData } from "element-china-area-data";
import { checkStatusName } from "@/utils/options";
export default {
  computed: {
    userInfo() {
      const userInfo = localStorage.getItem("userInfo");
      if (userInfo) {
        return JSON.parse(userInfo);
      }
      return {};
    },
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!/^1[3-9]\d{9}$/.test(value)) {
        callback("请输入正确的手机号码");
      }
      callback();
    };
    return {
      loading: false,
      file: null,
      headers: { "Content-Type": "multipart/form-data" },
      checkStatusName,
      options: regionData,
      info: {
        enterpriseName: "",
        // insureCertificateNumber: "",
        contactName: "",
        contactPhone: "",
        addressData: [],
        contactAddress: "",
        checkStatus: "",
        delivery: "",
      },
      addressStr: "",
      rules: {
        enterpriseName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        // insureCertificateNumber: [
        //   {
        //     required: true,
        //     message: "请输入统一社会信用代码",
        //     trigger: "blur",
        //   },
        // ],
        contactName: [
          {
            required: true,
            message: "请输入联系人姓名",
            trigger: "blur",
          },
        ],
        contactPhone: [
          {
            required: true,
            message: "请选择联系人电话",
            trigger: "blur",
          },
          { validator: validatePhone },
        ],
        addressData: [
          {
            type: "array",
            required: true,
            message: "请选择区域",
            trigger: "change",
          },
        ],
        contactAddress: [{ required: true, message: "请输入联系地址" }],
        delivery: [{ required: true, message: "请上传营业执照" }],
      },
    };
  },
  methods: {
    uploadFile() {
      const headers = {
        "Content-Type": "multipart/form-data",
      };
      const formData = new FormData();
      formData.append("file", this.file);
      this.$post("/file/upload", formData, headers).then((res) => {
        this.info.businessLicense = res.data;
        this.info.delivery = res.data;
      });
    },
    onSuccess(res, file) {
      if (res.code * 1 === 200) {
        this.info.businessLicense = file;
        this.$message.suucess("上传成功");
      } else {
        this.$message.error("上传失败");
      }
    },
    beforeUpload(file) {
      this.file = file;
      if (
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/jpg"
      ) {
        this.$message.warning("请上传图片");
        return false;
      }
      return true;
    },
    setValuesToLabels(obj) {
      if (Array.isArray(obj)) {
        obj.forEach(this.setValuesToLabels);
      } else if (typeof obj === "object" && obj !== null) {
        obj.value = obj.label;
        if (Array.isArray(obj.children)) {
          this.setValuesToLabels(obj.children);
        }
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.onSubmit();
        } else {
          return false;
        }
      });
    },
    onSubmit() {
      const {
        enterpriseName,
        contactName,
        contactPhone,
        addressData,
        contactAddress,
        businessLicense,
      } = this.info;
      const params = {
        enterpriseName,
        contactName,
        contactPhone,
        sheng: addressData[0],
        shi: addressData[1],
        qu: addressData[2],
        contactAddress,
        businessLicense,
        customerId: this.info.customerId,
      };
      if (this.loading) {
        return;
      }
      this.loading = true;
      this.$post("/customer/updateInfo", params)
        .then(() => {
          this.$message.success("操作成功");
          this.getNewToken();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getNewToken() {
      this.$post("/customer/exchangeToken").then((res) => {
        if (res && res.code * 1 === 200) {
          localStorage.setItem("token", res.data);
          this.getInfo();
        }
      });
    },
    getInfo() {
      this.$get("/customer/getInfo").then((res) => {
        if (res) {
          this.info = res.data;
          this.info.addressData = [
            this.info.sheng,
            this.info.shi,
            this.info.qu,
          ];
          console.log(this.info.addressData, "this.info.addressData");
          console.log(this.options, "this.options");
          this.info.delivery = this.info.businessLicense || "";
        } else {
          this.info = {};
        }
      });
    },
  },
  mounted() {
    this.setValuesToLabels(regionData);
    this.getInfo();
  },
};
</script>